<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type='text/javascript' src='../js/vue.js'></script>
</head>

<body>
  <!-- 
      所有被vue管理的函数，都写普通函数
      箭头函数的this找window对象

      事件基本使用：
        1、使用v-on:xxx 或 @xxx绑定事件  xxx是事件名
        2、时间的回调需要配置在methods中，最终会在vm上
        3、methods中配置的函数，不用箭头函数，否则this就指向window
        4、methods中配置的函数，都是被vue所管理的函数，this指向vm或组件的实例对象
        5、@click='demo' 和 @click='demo($event)'效果一致，但是后者可以传参
   -->
    <div id='root'>
      <h2>欢迎{{name}}</h2>
      <!-- <button v-on:click='showInfo'>点我提示信息</button> -->
      <button @click='showInfo1'>点我提示信息</button>
      <button @click='showInfo2($event,66)'>点我提示信息</button>
    </div>
</body>

<script type='text/javascript'>

    Vue.config.rpoductionTip = false;

    new Vue({
        el: '#root',
        data: {
            name: 'SONG'
        },
        methods:{
            // showInfo(event){
            //     console.log(event.target)//拿到按钮
            //     console.log(this)//拿到vue对象
            //     // alert('同学你好')
            // },
            showInfo1(event){
                console.log(event.target)//拿到按钮
                console.log(this)//拿到vue对象
                // alert('同学你好')
            },
            showInfo2(event,number){
                // console.log(event.target)//拿到按钮
                // console.log(this)//拿到vue对象
                console.log(event,number)
                alert('同学你好')
            }
        }
    })
</script>

</html>